<template>
	<section>
        <Row>         
                <Row>
                    <!--工具条-->
                    <el-col :span="23" class="toolbar" id="serachId">
                        <el-form :inline="true" :model="filters">
                            <el-button  @click="dictionaryAdd" style="float:left;" type="primary" size="small">新增警种</el-button>
                            <el-form-item style="float:right">
                                <el-button type="primary" v-on:click="getList" size="small">查询</el-button>
                            </el-form-item>
                            <el-form-item style="float:right">
                                <el-input v-model="filters.roleName" placeholder="请输入警种名称" size="small"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </Row>       
                <el-row class="tac titleLineSymbolTwo">
                    <!-- <el-col :span="4">
                        <el-tree @node-click="toGetList" :data="treeData" node-key="id" ref="tree" :props="defaultProps" :expand-on-click-node="false">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.data.description }}</span>
                            </span>
                        </el-tree>
                    </el-col> -->
                    
                    <el-col :span="23" >
                        <!--列表-->
                        <el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
                            <el-table-column type="index" label="序号" width="60">
                            </el-table-column>
                            <!-- <el-table-column prop="pid" label="父级名称">
                            </el-table-column> -->
                            <el-table-column prop="policeTye" label="警种名称">
                            </el-table-column>
                            <el-table-column prop="sort" label="排序">
                            </el-table-column>
                            <el-table-column prop="creatName" label="创建人">
                            </el-table-column>
                            <el-table-column prop="createDate" label="创建时间">
                            </el-table-column>                       
                            <el-table-column label="操作">
                                <template scope="scope">
                                    <el-button type="text" size="small" @click="dictionaryDetais(scope.$index, scope.row)">查看</el-button>
                                    <el-button type="text" size="small" @click="dictionaryEdit(scope.$index, scope.row)">修改</el-button>
                                    <el-button type="text" size="small" @click="dictionaryDelete(scope.$index, scope.row)">删除</el-button>
                                    <!-- <el-button type="text" size="small" @click="dictionaryDelete(scope.$index, scope.row)">删除</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--工具条-->
                        <el-col :span="24" class="toolbar marginTop10px">
                            <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                            :current-page="pageNum" :page-size="pageSize" :total="total">
                            </el-pagination>
                        </el-col>
                    </el-col>
                </el-row>
                <!-- <el-row type="flex" class="row-bg" justify="end">
					<el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                    :current-page="pageNum" :page-size="pageSize" :total="total">
                    </el-pagination>
				</el-row> -->
            <!--编辑界面-->
            <Modal v-model="editFormVisible" title="警种编辑" width='50%'>
                <el-card>
                <el-form :model="editForm" label-width="120px" ref="editForm">
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="父级名称">
                                <el-select placeholder="请选择" filterable v-model="editForm._item" @change="selectChange(editForm,editForm._item)" :disabled="true">
                                    <el-option v-for="item in pList" :key="item.id" :label="item.description" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="字典类型">
                                <el-input v-model="editForm.type" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->                            
                            <el-form-item label="警种名称">
                                <el-input v-model="editForm.policeTye"></el-input>
                            </el-form-item>                                        
                            <el-form-item label="警种编码">
                                <el-input v-model="editForm.policeCode"></el-input>
                            </el-form-item>  
                             <el-form-item label="排序">
                                <el-input v-model="editForm.sort"></el-input>
                            </el-form-item>                            
                            <el-form-item label="描述">
                                <el-input v-model="editForm.remark" type="textarea" placeholder="内容不超过100字"></el-input>
                            </el-form-item>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                </div>
            </Modal>

            <!--新增界面-->
            <Modal v-model="addFormVisible" title="新增警种" width='50%'>
                <el-card>
                <el-form :model="addForm" label-width="120px" ref="addForm">
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="父级名称">
                                <el-select placeholder="请选择" filterable v-model="addForm._item" @change="selectChange(addForm,addForm._item)" :disabled="true">
                                    <el-option v-for="item in pList" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="字典类型">
                                <el-input v-model="addForm.type" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->                              
                    <el-form-item label="警种名称">
                        <el-input v-model="addForm.policeTye"></el-input>
                    </el-form-item>                                        
                    <el-form-item label="警种编码">
                        <el-input v-model="addForm.policeCode"></el-input>
                    </el-form-item>
                     <el-form-item label="排序">
                        <el-input v-model="addForm.sort"></el-input>
                    </el-form-item>                                       
                    <el-form-item label="描述">
                        <el-input v-model="addForm.remark" type="textarea" placeholder="内容不超过100字"></el-input>
                    </el-form-item>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="addFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
                </div>
            </Modal>
        </Row>
	</section>
</template>

<script>

	import util from '../../app-market/api/util';
	//import NProgress from 'nprogress'
	import { getDictionaryList, getDictionaryTree, addDictionary, updateDictionary, deleteDictionary } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					roleNmae: ''
				},
				tableData: [],
				total: 0,
				pageNum: 1,
				pageSize:10,
				listLoading: false,

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {
                    policeTye:'',
                    policeCode:'',
                    sort:'',
                    remark:'',
                    creatName:'',
                    createDate:''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				//新增界面数据
				addForm: {
				    policeTye:'',
                    policeCode:'',
                    sort:'',
                    remark:'',
                    creatName:'',
                    createDate:''
                },
                pList:[],//所以父字段
                treeData:[],
                defaultProps: {
                    id:'id',
					label: 'description',
					children: 'dictionaryVos',
                },
			}
		},
		methods: {
			formatCreateDate: function (row, column) {
				return row.createdDate = (!row.createdDate || row.createdDate == '') ? '' : util.formatDate.format(new Date(row.createdDate), 'yyyy-MM-dd hh:mm:ss');
			},
			formatLastUpdateDate: function (row, column) {
				return row.lastUpdatedDate = (!row.lastUpdatedDate || row.lastUpdatedDate == '') ? '' : util.formatDate.format(new Date(row.lastUpdatedDate), 'yyyy-MM-dd hh:mm:ss');
			},
			formatIs: function (row, column) {
				let propVal = row[column.property];
				if (column.property === 'isDirectory'){
					return propVal == 1 ? '是' : propVal == 0  ? '否' : '未知';
				}
			},
			handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
			},
			//获取列表
			getList() {
				let params = {
					pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    // pid:this.$refs.tree.getCurrentKey()
                    type: 'jobCategory'
				};
				this.listLoading = true;
				//NProgress.start();
				getDictionaryList(params).then(function(result){

                   let dataArr=[{"policeTye":"国保","sort":"1","policeCode":"gb","creatName":"管理员","createDate":"2018-05-29 09:11:37","remark":"国家安全保卫"},
{"policeTye":"技侦","sort":"2","policeCode":"jz","creatName":"管理员","createDate":"2018-05-29 09:11:38","remark":"技术侦查"},
{"policeTye":"治安","sort":"3","policeCode":"za","creatName":"管理员","createDate":"2018-05-29 09:11:39","remark":"治安管理"},
{"policeTye":"边防","sort":"4","policeCode":"bf","creatName":"管理员","createDate":"2018-05-29 09:11:40","remark":"边防安全"},
{"policeTye":"刑侦","sort":"5","policeCode":"xz","creatName":"管理员","createDate":"2018-05-29 09:11:41","remark":"刑事侦查"},
{"policeTye":"入出境","sort":"6","policeCode":"crj","creatName":"管理员","createDate":"2018-05-29 09:11:42","remark":"出入境检查"},
{"policeTye":"消防","sort":"7","policeCode":"xf","creatName":"管理员","createDate":"2018-05-29 09:11:43","remark":"消防"},
{"policeTye":"警卫","sort":"8","policeCode":"jw","creatName":"管理员","createDate":"2018-05-29 09:11:44","remark":"警卫"},]

                //	this.tableData = result.data.data.list;
                    this.tableData=dataArr;
	                this.pageNum = result.data.data.pageNum;
	                this.pageSize = result.data.data.pageSize;
                //	this.total = result.data.data.total;
                    this.total=8;
	                this.listLoading = false;
				}.bind(this)).catch(function (error) {
					this.listLoading = false;
					console.log(error);
				}.bind(this));
            },
            getDictionaryTree() {
                let params = {};
                getDictionaryTree(params).then(function(result){
                    this.treeData = result.data;
                }.bind(this)).catch(function (error) {
                    this.listLoading = false;
                    console.log(error);
                }.bind(this));
            },
            toGetList:function(){
                this.getList();
            },
			//删除
			dictionaryDelete: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					deleteDictionary(row.id).then((res) => {
						this.listLoading = false;
                        //NProgress.done();
                        if(res.data.data === -1){
                            this.$message({
                                message: '存在子数据字典，删除失败',
                                type: 'info'
                            });
                        }else{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }
						this.getList();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					}); 
				});
			},
			//显示编辑界面
			dictionaryEdit: function (index, row) {
                let _this = this;
                // _this.pList.forEach(obj => {
                //     if(obj.id == row.pid){
                //         row._item = obj;
                //     }
                // });
                _this.editForm = Object.assign({}, row);
              //  _this.editForm.pid = row._item.id;
                _this.editFormVisible = true;
			},
			//显示新增界面
			dictionaryAdd: function () {
                let _this = this;
                this.addForm = {
					pid:'',
					name: '',
                    value: '',
                    description: '',
                    type: '',
                    isDirectory:0
                },
                _this.pList.forEach(obj => {
                    if(obj.id === 25){
                        _this.addForm._item = obj;
                        _this.addForm.type = obj.value;
                        _this.addForm.pid = obj.id;
                    }
                });
                _this.addFormVisible = true;
            },
            //查目录
            getpList() {
				let params = {
					pageNum: 1,
                    pageSize: 10000,
                    isQueryPList:true
				};
				//NProgress.start();
				getDictionaryList(params).then(function(result){
					this.pList = result.data.data.list;
				}.bind(this)).catch(function (error) {
					console.log(error);
				}.bind(this));
            },
            selectChange: function (form,item) {
                form.type = item.value;
                form.pid = item.id;
                if(item.pid == '-1'){
                    form.isDirectory = 1;
                }
            },
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
                            //NProgress.start();
                            delete this.addForm._item;
                            let params = Object.assign({}, this.editForm);
							updateDictionary(params).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
                            //NProgress.start();
                            delete this.addForm._item;
                            let params = Object.assign({}, this.addForm);
							addDictionary(params).then((res) => {
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
		},
		mounted() {
            // this.getDictionaryTree();
            this.getList();
            this.getpList();
		}
	}

</script>